<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="modelValue"
    @close="closeForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        处理信息
      </div>
    </template>
    <el-scrollbar class="ba-table-form-scrollbar">
      <div
        class="ba-operate-form"
        :style="'width: calc(100% - ' + state.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="onAddSubmit(formRef)"
          :model="state.form"
          label-position="right"
          label-width="160px"
          :rules="rules"
        >
          <el-divider content-position="left">维修人员信息</el-divider>
          <el-form-item label="姓名" prop="createUser">
            <el-input v-model="state.form.createUser" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="state.form.phone" />
          </el-form-item>
          <!-- <el-form-item label="确认日期">
            <el-date-picker
              v-model="state.form.createTime"
              type="date"
              placeholder="请选择日期"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD "
            />
          </el-form-item> -->
          <el-divider content-position="left">维护信息</el-divider>
          <el-form-item label="设备ID" prop="eid">
            <el-input
              v-model="rowForm.eqid"
              disabled
              placeholder="请录入设备ID"
            />
          </el-form-item>
          <el-form-item label="设备编号" prop="ecode">
            <el-input
              v-model="rowForm.ecode"
              disabled
              placeholder="请录入设备编号"
            />
          </el-form-item>
          <el-form-item label="网关编号" prop="gatewaycode">
            <el-input
              v-model="rowForm.gatewaycode"
              disabled
              placeholder="请录入网关编号"
            />
          </el-form-item>
          <el-form-item label="企业名称" prop="cname">
            <el-input
              v-model="rowForm.cname"
              disabled
              placeholder="请录入企业名称"
            />
          </el-form-item>
          <el-form-item label="维修情况" prop="handleSc">
            <el-input v-model="state.form.handleSc" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="state.form.remark" />
          </el-form-item>
          <FormItem
            prop="type"
            label="类型"
            v-model="state.form.type"
            type="radio"
            @click="getCarbonInfo"
            :data="{
              content: { 1: '更换滤芯', 2: '其他' },
              childrenAttr: { border: true },
            }"
          />
          <div v-if="state.form.type === '1'">
            <el-divider content-position="left">活性炭表单更新</el-divider>
            <el-form-item label="压力初始值(Pa)" prop="pressureValue">
              <el-input
                v-model="state.form.pressureValue"
                placeholder="请录输入设备压力初始值"
              />
            </el-form-item>
            <el-form-item label="压力临界值(Pa)" prop="criticalValue">
              <el-input
                v-model="state.form.criticalValue"
                placeholder="请录输入设备压力临界值"
              />
            </el-form-item>
            <el-form-item label="使用寿命长度(小时)" prop="lifeValue">
              <el-input
                v-model="state.form.lifeValue"
                placeholder="请录输入设备使用寿命长度"
              />
              <div class="block-help">活性炭更换时间设定</div>
            </el-form-item>
            <el-form-item label="活性炭更换量(吨)" prop="usernum">
              <el-input
                v-model="state.form!.usernum"
                placeholder="请输入更换量"
                type="number"
              />
              <div class="block-help">当次更换量</div>
            </el-form-item>
            <el-form-item label="提示更换时长(小时)" prop="prompt">
              <el-input
                v-model="state.form!.prompt"
                placeholder="请输入设定值"
              />
              <div class="block-help">活性炭提前提示更换时间设定</div>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="closeForm">取消</el-button>
        <!-- <el-button
          v-blur
          :loading="state.submitLoading"
          @click="onAddSubmit(formRef)"
          type="primary"
        >
          确认待处理
        </el-button> -->
        <el-button
          v-blur
          :loading="state.submitLoading"
          @click="onAddSubmit(formRef)"
          type="success"
        >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import type { TableRow } from "@/utils/baTable"; //表格列行类型
import { reactive, ref, inject, onMounted } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormRules, FormInstance } from "element-plus";
import FormItem from "@/components/formItem/index.vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
// import { useWarnLog } from "@/store/backend/EquipM/warn";
import { useCarbon } from "@/store/backend/EquipM/activeCarbon";
import { throttle } from "@/utils/common";

const { proxy } = useCurrentInstance(); //mitt
//接受来自父组件的注入
const baTable = inject("baTable") as baTableClass;
const warnLog = inject("warnStore") as any;
const access = inject("accessStore") as any;
const formRef = ref<InstanceType<typeof ElForm>>();
// const warnLog = useWarnLog();
const carbon = useCarbon();

interface Props {
  modelValue: boolean;
  rowForm: any;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  rowForm: () => {
    return {};
  },
});
type Item = {
  createUser: string; //维修人员姓名
  phone: string; //维修人员
  remark: string; //备注
  eid: string; //设备id
  ecode: string; //设备编号
  handleSc: string;
  state: number;
  type: string; //处理告警类型 1为更换滤芯 2为其他
  pressureValue: string;
  criticalValue: string;
  lifeValue: string;
  prompt: string;
  usernum: number;
  cname: string;
  gatewaycode: string;
};
type Item2 = {
  pressureValue: string; //活性炭告警处理后重置压力初始值
  criticalValue: string; //活性炭告警处理后重置压力临界值
  lifeValue: string; //活性炭告警处理后重置使用寿命长度
};
const rules = reactive<FormRules>({
  createUser: [
    { required: true, message: "维修人员姓名不能为空", trigger: "blur" },
  ],
  phone: [{ message: "填写手机号", trigger: "blur" }],
  handleSc: [
    { required: true, message: "请填写维修处理情况", trigger: "blur" },
  ],
  type: [{ required: true, message: "请选择告警处理类型", trigger: "change" }],
  // ecode: [{ required: true, message: "设备编号不能为空", trigger: "blur" }],
  pressureValue: [
    { required: true, message: "压力初始值不能为空", trigger: "blur" },
  ],
  criticalValue: [
    { required: true, message: "压力临界值不能为空", trigger: "blur" },
  ],
  lifeValue: [
    {
      required: true,
      message: "使用寿命长度不能为空",
      trigger: "blur",
    },
  ],
  prompt: [
    {
      required: true,
      message: "活性炭提前提示更换时间设定不能为空",
      trigger: "blur",
    },
  ],
  usernum: [
    {
      required: true,
      message: "当前更换量不能为空",
      trigger: "blur",
    },
  ],
});
const state: {
  labelWidth: number;
  submitLoading: boolean;
  form: Item;
  form3: any;
} = reactive({
  labelWidth: 160,
  submitLoading: false,
  form: {
    type: "",
    createUser: "",
    phone: "",
    state: 1,
    remark: "",
    eid: "",
    ecode: "",
    handleSc: "",
    pressureValue: "",
    criticalValue: "",
    lifeValue: "",
    prompt: "",
    usernum: 0,
    cname: "",
    gatewaycode: "",
  },
  form3: {
    id: "",
    eid: "",
    ecode: "",
    pressureValue: "",
    criticalValue: "",
    lifeValue: "",
    prompt: "",
    usernum: 0,
  },
});
const emits = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

const closeForm = () => {
  emits("update:modelValue", false);
};

const onAddSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      // state.form.type === "1" ? carbonForm() : "";
      baTable.table.loading = true;
      state.form.eid = props.rowForm.eqid;
      state.form.ecode = props.rowForm.ecode;
      state.form.cname = props.rowForm.cname;
      state.form.gatewaycode = props.rowForm.gatewaycode;
      warnLog
        .addEventHandle(state.form, props.rowForm.type)
        .then((res: any) => {
          baTable.table.loading = false;
          clearForm();
          closeForm();
          //修改告警状态
          warnLog.deviceItem.state = 1;
          warnLog.changeEventHandle(warnLog.deviceItem);
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};
//装填活性炭form
const carbonForm = () => {
  state.form3.eid = props.rowForm.eqid;
  state.form3.ecode = props.rowForm.ecode;
  state.form3.pressureValue = state.form.pressureValue;
  state.form3.criticalValue = state.form.criticalValue;
  state.form3.lifeValue = state.form.lifeValue;
  state.form3.prompt = state.form.prompt;
  state.form3.usernum = state.form.usernum;
  //更新活性炭设备
  // carbon.updateCarbonData(state.form3).then(() => {
  //查询单个设备详情
  // carbon.getCarbonItem({ eid: state.form3.eid }).then((res: any) => {
  //   //拿到replaceTime字段数据修改设备接入数据
  //   warnLog.deviceItem.replaceTime = res.data.replaceTime;
  //   access.upDateDevice(warnLog.deviceItem);
  // });
  // });
};
//还原默认两个form的数据
const clearForm = () => {
  state.form = {
    type: "",
    createUser: "",
    phone: "",
    state: 0,
    remark: "",
    eid: "",
    ecode: "",
    handleSc: "",
    pressureValue: "",
    criticalValue: "",
    lifeValue: "",
    prompt: "",
    usernum: 0,
    cname: "",
    gatewaycode: "",
  };
  state.form3 = {
    id: "",
    eid: "",
    ecode: "",
    pressureValue: "",
    criticalValue: "",
    lifeValue: "",
    prompt: "",
    usernum: 0,
  };
};
//获取活性炭数据
const getCarbonInfo = throttle(() => {
  state.form.type === "1"
    ? carbon.getCarbonInfo({ eid: props.rowForm.eqid }).then((res: any) => {
        state.form3.id = res.rows[0].id;
      })
    : "";
}, 500);
</script>

<style lang="scss" scoped>
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}
</style>
